<template>
  <div>
    <div class="tabBar-set">
      <div class="left">
        <div class="phone-preview">
          <div class="phone-header" />
          <div class="phone-page-title">
            <div class="page-title">页面标题</div>
            <div class="capsule" />
          </div>
          <div class="phone-container" />
          <div class="phone-tabbar">
            <div v-for="(item, index) in tabForm.list" :key="index" class="tab-item"
              :style="{ color: isActive(index) ? tabForm.selectedColor : tabForm.color }"
              @click="selectedIndex = index">
              <div>
                <el-image :src="isActive(index) ? item.selectedIconPath || item.iconPath : item.iconPath"
                  class="tab-icon" fit="cover" />
              </div>
              <div class="tab-text">{{ item.text }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <el-alert style="width: 500px; margin-bottom: 20px" title="如果有修改，请点击保存按钮更新数据" type="warning"
          :closable="false" />

        <el-form :model="tabForm" label-width="180px">
          <el-form-item label="导航文字默认状态颜色：">
            <el-color-picker v-model="tabForm.color" />
            <el-input v-model="tabForm.color" style="width: 160px; margin-left: 10px">
              <template #append>
                <el-button @click="tabForm.color = '#7A7E83'">重置</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="导航文字选中状态颜色：">
            <el-color-picker v-model="tabForm.selectedColor" />
            <el-input v-model="tabForm.selectedColor" style="width: 160px; margin-left: 10px">
              <template #append>
                <el-button @click="tabForm.selectedColor = '#3cc51f'">重置</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="导航栏设置：">
            <VueDraggable v-model="tabForm.list" :animation="150" target="tbody" :filter="'.el-input'"
              :preventOnFilter="false">
              <el-table :data="tabForm.list" style="width: 100%">
                <el-table-column prop="text" label="导航名称" width="200">
                  <template #default="scope">
                    <i class="iconfont-sys"
                      style="color: var(--el-color-primary); margin-right: 10px; cursor: pointer">&#xe648;</i>
                    <span v-if="editRowIndex !== scope.$index">{{ scope.row.text }}</span>
                    <el-input v-else v-model="scope.row.text" maxlength="4" show-word-limit style="width: 120px" />
                    <i v-if="editRowIndex !== scope.$index" class="iconfont-sys edit-icon"
                      @click="editRowIndex = editRowIndex === scope.$index ? -1 : scope.$index">&#xe65f;</i>
                    <i v-if="editRowIndex === scope.$index" class="iconfont-sys edit-icon"
                      @click="editRowIndex = -1">&#xe616;</i>
                  </template>
                </el-table-column>

                <el-table-column prop="pagePath" label="跳转链接" width="240">
                  <template #default="scope">
                    <el-link type="primary" @click="handleSelectPageLink(scope.$index)">{{
                      scope.row.linkName
                    }}</el-link>
                  </template>
                </el-table-column>

                <el-table-column prop="iconPath" label="未选中图标" width="200">
                  <template #default="scope">
                    <div class="img-container" @click="editIcon(scope.$index, 'iconPath')">
                      <el-image :src="scope.row.iconPath" class="tab-icon" />
                      <div class="mask">替换</div>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="selectedIconPath" label="已选中图标" width="200">
                  <template #default="scope">
                    <div class="img-container" @click="editIcon(scope.$index, 'selectedIconPath')">
                      <el-image :src="scope.row.selectedIconPath" class="tab-icon" />
                      <div class="mask">替换</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="200" #default="scope">
                  <el-switch v-model="scope.row.status" />
                </el-table-column>

                <el-table-column label="操作" width="80">
                  <template #default="scope">
                    <a style="color: red; cursor: pointer" @click="handleDel(scope.$index)">删除</a>
                  </template>
                </el-table-column>
              </el-table>
            </VueDraggable>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin-top: 10px" :disabled="tabForm.list.length >= 5" @click="addNav">
              添加导航({{ tabForm.list.length }}/5)
            </el-button>
          </el-form-item>
        </el-form>

        <div class="edit-btn">
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
        </div>
      </div>
    </div>

    <image-selected-dialog v-if="showImageChooseDialog" :single-type="true" :operation-type="false"
      :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"></image-selected-dialog>

    <el-dialog v-model="showTabsSelectedDialog" title="导航选择" width="900" @close="handleCloseLinkDialog('cancel')">
      <el-tabs v-model="activeName" tab-position="left">
        <el-tab-pane label="基础页面" name="custom">
          <div class="link-list">
            <div class="link-item" v-for="(link, linkIndex) in basePageData" :key="linkIndex"
              :class="{ active: selectedId === link.pagePath }" @click="handleSelectLink(link)">
              {{ link.text }}
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCloseLinkDialog('cancel')" style="margin-right: 6px">关闭</el-button>
          <el-button type="primary" @click="handleCloseLinkDialog('submit')">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'
import { VueDraggable } from 'vue-draggable-plus'
import { reactive, ref } from 'vue'
import { getTabBarList, addTabBar, editTabBar } from '@/api/materialManagement'

const showTabsSelectedDialog = ref(false)
const activeName = ref('custom')
const submitLoading = ref(false)
const showImageChooseDialog = ref(false)
const editRowIndex = ref(-1)
const selectedIndex = ref(0)
const changeIndex = ref()
const changeIconName = ref<IconKey>('iconPath')
const selectedId = ref()
const selectLink = ref()
const chooseIndex = ref()

interface TabBarItem {
  pagePath: string
  iconPath: string
  selectedIconPath: string
  text: string
  linkName: string
  status: boolean
}

type IconKey = 'iconPath' | 'selectedIconPath'

const tabForm = reactive<{
  id?: string
  color: string
  selectedColor: string
  list: TabBarItem[]
}>({
  color: '#7A7E83',
  selectedColor: '#3cc51f',
  list: [
    {
      pagePath: 'pages/drivingSchool/drive',
      iconPath: 'https://image.lutongjiakao.com/system/dd53a933f6dc461c941937454a49cfce.png',
      selectedIconPath:
        'https://image.lutongjiakao.com/system/0451fe7d9a024db0b912b3934a32d96e.png',
      text: '首页',
      linkName: '首页',
      status: true
    },
    {
      pagePath: 'pages/exam/exam',
      iconPath: 'https://image.lutongjiakao.com/system/ae63c9e9a78b4f82ae9c3710b9445372.png',
      selectedIconPath:
        'https://image.lutongjiakao.com/system/3a537104e8d24993a853a5d5e7f47405.png',
      text: '练习',
      linkName: '练习',
      status: true
    },
    {
      pagePath: 'pages/user/user',
      iconPath: 'https://image.lutongjiakao.com/system/5139a318b7d34b0eb095f5cae72fc324.png',
      selectedIconPath:
        'https://image.lutongjiakao.com/system/f5e60c15e7a74a629559a04cfcf82a6a.png',
      text: '我的',
      linkName: '我的',
      status: true
    }
  ]
})

const basePageData = [
  {
    pagePath: 'pages/drivingSchool/drive',
    iconPath: 'https://image.lutongjiakao.com/system/dd53a933f6dc461c941937454a49cfce.png',
    selectedIconPath:
      'https://image.lutongjiakao.com/system/0451fe7d9a024db0b912b3934a32d96e.png',
    text: '首页',
    linkName: '首页',
    status: true
  },
  {
    pagePath: 'pages/exam/exam',
    iconPath: 'https://image.lutongjiakao.com/system/ae63c9e9a78b4f82ae9c3710b9445372.png',
    selectedIconPath:
      'https://image.lutongjiakao.com/system/3a537104e8d24993a853a5d5e7f47405.png',
    text: '练习',
    linkName: '练习',
    status: true
  },
  {
    pagePath: 'pages/exam/vipCourse',
    iconPath: 'https://image.lutongjiakao.com/system/06e51c2cd36e41ed9cb39230b4694e77.png',
    selectedIconPath:
      'https://image.lutongjiakao.com/system/59347acdedab4649b0d3c9301a6724bf.png',
    text: 'VIP页',
    linkName: 'VIP页',
    status: true
  },
  {
    pagePath: 'pages/exam/myGrades',
    iconPath: 'https://image.lutongjiakao.com/system/da933f3e76dc40cc82fe465b068193d1.png',
    selectedIconPath:
      'https://image.lutongjiakao.com/system/0d516b455b19476f9d82d79707ee1aa9.png',
    text: '成绩',
    linkName: '成绩',
    status: true
  },
  {
    pagePath: 'pages/user/user',
    iconPath: 'https://image.lutongjiakao.com/system/5139a318b7d34b0eb095f5cae72fc324.png',
    selectedIconPath:
      'https://image.lutongjiakao.com/system/f5e60c15e7a74a629559a04cfcf82a6a.png',
    text: '我的',
    linkName: '我的',
    status: true
  }
]

function handleSelectLink(item: any) {
  selectedId.value = item.pagePath
  selectLink.value = item
}

function handleCloseLinkDialog(type: any) {
  if (type === 'submit') {
    tabForm.list[chooseIndex.value].pagePath = selectLink.value.pagePath
    tabForm.list[chooseIndex.value].iconPath = selectLink.value.iconPath
    tabForm.list[chooseIndex.value].selectedIconPath = selectLink.value.selectedIconPath
    tabForm.list[chooseIndex.value].linkName = selectLink.value.linkName
  }
  showTabsSelectedDialog.value = false
  selectedId.value = ''
}

function isActive(index: number) {
  return index === selectedIndex.value
}

function handleDel(index: number) {
  // if (tabForm.list.length <= 2) {
  //   ElMessage.error('最少保留两个')
  //   return
  // }

  tabForm.list.splice(index, 1)
  // if (selectedIndex.value >= tabForm.list.length) {
  //   selectedIndex.value = tabForm.list.length - 1
  // }
}

function addNav() {
  if (tabForm.list.length === 5) {
    ElMessage.warning('最多添加5个')
    return
  }

  tabForm.list.push({
    pagePath: 'pages/drivingSchool/drive',
    iconPath: 'https://image.lutongjiakao.com/system/dd53a933f6dc461c941937454a49cfce.png',
    selectedIconPath:
      'https://image.lutongjiakao.com/system/0451fe7d9a024db0b912b3934a32d96e.png',
    text: '首页',
    linkName: '首页',
    status: true
  })
}

function handleSelectPageLink(index: number) {
  showTabsSelectedDialog.value = true
  chooseIndex.value = index
}

function editIcon(index: number, name: any) {
  showImageChooseDialog.value = true
  changeIndex.value = index
  changeIconName.value = name
}

function handleCloseImageDialog(value: any) {
  if (value) {
    tabForm.list[changeIndex.value][changeIconName.value] = value.fileUrl
  }
  showImageChooseDialog.value = false
}

async function getData() {
  const res = await getTabBarList({})
  if (res.code === '00000' && res.data) {
    let data = JSON.parse(res.data.property)
    tabForm.color = data.color
    tabForm.selectedColor = data.selectedColor
    if (data.list.length > 0) {
      tabForm.list = data.list
    }
    tabForm.id = res.data.id
  }
}

function handleSubmit() {
  if (tabForm.id) {
    handleEdit(tabForm)
  } else {
    handleAdd(tabForm)
  }
}

async function handleAdd(tabData: any) {
  try {
    submitLoading.value = true
    const res = await addTabBar({
      property: JSON.stringify(tabData)
    })
    if (res.code === '00000') {
      ElMessage.success('修改成功')
      await getData()
    }
  } catch (e) {
  } finally {
    submitLoading.value = false
  }
}

async function handleEdit(tabData: any) {
  try {
    submitLoading.value = true
    const res = await editTabBar(tabData.id, {
      property: JSON.stringify(tabData)
    })
    if (res.code === '00000') {
      ElMessage.success('修改成功')
      await getData()
    }
  } catch (e) {
  } finally {
    submitLoading.value = false
  }
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.tabBar-set {
  display: flex;
  height: 800px;
  padding: 10px;

  .left {
    width: 375px;

    .phone-preview {
      width: 375px;
      height: 600px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

      .phone-header {
        background: url('https://image.lutongjiakao.com/system/354d97034af84a0a9817ad0191d879d8.png') no-repeat center/cover;
        width: 100%;
        height: 44px;
      }

      .phone-page-title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        position: relative;

        .page-title {
          font-weight: bold;
          color: #000;
          position: absolute;
          top: 0;
          left: 150px;
        }

        .capsule {
          background: url('https://image.lutongjiakao.com/system/45557340b294468cb107823bdd1891b7.png') no-repeat center/cover;
          width: 87px;
          height: 32px;
          position: absolute;
          top: 9px;
          right: 0;
          z-index: 9;
        }
      }

      .phone-container {
        width: 375px;
        height: 450px;
        background-color: #f5f7fa;
      }

      .phone-tabbar {
        display: flex;
        height: 50px;
        background: #fff;

        .tab-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .tab-text {
            font-size: 12px;
            margin-top: 2px;
          }

          .tab-icon {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }

  .right {
    flex: 1;
    padding: 0 20px;

    .img-container {
      position: relative;

      .mask {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 20px;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        color: #fff;
        font-size: 12px;
        cursor: pointer;
      }

      .tab-icon {
        width: 60px;
        height: 60px;
      }
    }

    .edit-icon {
      margin-left: 4px;
      cursor: pointer;
      color: var(--el-color-primary);
    }
  }
}

.link-list {
  display: flex;
  flex-wrap: wrap;

  .link-item {
    border: 1px solid #f4f5f8;
    border-radius: 12px;
    padding: 10px 0;
    margin: 0 16px 16px 0;
    color: black;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    cursor: pointer;
    width: 120px;
    text-align: center;

    &:hover {
      border: 1px solid var(--el-color-primary);
    }
  }

  .link-item.active {
    background-color: var(--el-color-primary);
    color: #fff;
  }
}
</style>
